<template>
  <div class="tip" v-if="info.status == 0">请先进行实名认证</div>
  <div v-else>
    <el-card>
      <div class="charge">
        <span>余额：{{ info.money }}</span>
      </div>
      <el-form label-width="80px" >
        <el-form-item label="充值金额" style="margin: 40px 300px">
          <el-input v-model="recharge" style="width: 200px;" />
          <el-button type="primary" @click="commit" style="margin-left: 10px">充值</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import {ref} from "vue";
import userApi from "@/api/userApi.js";
import {ElMessage} from "element-plus";

//充值余额
const recharge = ref(null);
//用户余额
const info = ref({});

//获取用户余额
function getUserBalance() {
  userApi.getInfo().then(resp => {
    info.value = resp.data;
  });
}
getUserBalance();
//充值
function commit() {
  info.value.money = recharge.value;
  userApi.update(info.value)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success("充值成功");
          recharge.value = null;
          getUserBalance();
        } else {
          ElMessage.error(resp.msg);
        }
      });
}
</script>

<style scoped>
.tip, .charge {
  font-size: 20px;
  text-align: center;
  margin: 40px 0;
}

</style>